<template>
  <div class="star" :class="starType">
    <span class="star-item" :class="itemClass" v-for="(itemClass,index) in classArr" :key="index"></span>
  </div>
</template>

<script type="text/ecmascript-6">
    const ON = 'on';
    const HALF = 'half';
    const OFF = 'off';
    export default {
        props: {
            size: { 
                type: Number, 
                default: 5
             },
            typeSize: {
                type: Number,
                default: 24
            },
            score: {
                type: Number,
                default: 5
            }
        },
        computed: {
            classArr: function () {
                let scor = Math.floor(this.score * 2) / 2;
                let half = scor % 1;
                scor = Math.floor(scor);
                let arr = [];
                while (arr.length < scor) { arr.push(ON); }
                if (half !== 0) { arr.push(HALF); }
                while (arr.length < this.size) { arr.push(OFF); }
                return arr;
            },
            starType: function () {
                return `star-${this.typeSize}`;
            }
        }
    };
</script>

<style lang="stylus" rel="stylesheet/stylus">
    @import '../commonstatic/stylus/index.styl';
    .star
        font-size 0
        .star-item
            display inline-block
            vertical-align top
            background-repeat: no-repeat
        &.star-24
            .star-item
                width 10px
                height 10px
                margin-right 3px
                background-size 10px 10px
                &:last-child
                    margin-right 0
                &.on
                    bg-image('star24_on')
                &.half
                    bg-image('star24_half')
                &.off
                    bg-image('star24_off')
        &.star-36
            .star-item
                width 15px
                height 15px
                margin-right 16px
                background-size 15px 15px
                &:last-child
                    margin-right 0
                &.on
                    bg-image('star36_on')
                &.half
                    bg-image('star36_half')
                &.off
                    bg-image('star36_off')
        &.star-48
            .star-item
                width 20px
                height 20px
                margin-right 22px
                background-size 20px 20px
                &:last-child
                    margin-right 0
                &.on
                    bg-image('star48_on')
                &.half
                    bg-image('star48_half')
                &.off
                    bg-image('star48_off')
</style>